<template>
    <el-main class="aside-message">
        <div class="search-div">
            <el-input v-model="input" class="search-div-input" placeholder="搜索" :suffix-icon="Calendar">
                <template #prefix>
                    <el-icon class="el-input__icon">
                        <search />
                    </el-icon>
                </template>
            </el-input>
            <div class="search-div-icon">
                <el-icon size="20px">
                    <Plus />
                </el-icon>
            </div>
        </div>
        <div class="message-div" :style="index == SelectedRow ? dynamicStyle : ''" @click="changeStyle(index)"
            v-for="(index, item) in arry" :index="item" :key="item">
            <el-avatar size="large" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <div class="message-div-container">
                <div class="message-div-container-title">
                    <p :style="index == SelectedRow ? dynamicStyle : 'color:black'" class="title">全球聊天室</p>
                    <span :style="index == SelectedRow ? dynamicStyle : 'color:#c4c4c4'" class="time">16:15</span>
                </div>

                <p :style="index == SelectedRow ? dynamicStyle : 'color:#c4c4c4'" class="message-div-container-info">
                    颾浪剑客：12312312321</p>
            </div>
        </div>
    </el-main>
</template>

<script>
import { defineComponent, ref, reactive } from "vue";
export default defineComponent({
    setup() {
        const SelectedRow = ref();
        const arry = ref(5);
        const dynamicStyle = reactive({
            background: "#0099ff",
            color: "#ffffff",
        });
        const changeStyle = (index) => {
            SelectedRow.value = index;
        }
        return {
            SelectedRow,
            arry,
            dynamicStyle,
            changeStyle,
        };
    },
})
</script>


<style lang="less" scoped>
.aside-message {
    width: 250px;
    background: #ffffff;

    &>.search-div {
        height: 50px;
        display: flex;
        align-items: center;

        &>.search-div-input {

            width: 170px;
            background: #f5f5f5;
        }

        &>.search-div-icon {
            width: 30px;
            height: 30px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            border-radius: 10%;
            margin-left: 15px;

            &>.el-icon {
                margin-left: 4px;
            }
        }
    }

    &>.message-div {
        padding: 15px 0px;
        height: 86px;
        width: 100%;
        cursor: default;
        display: flex;
        align-items: center;

        &>.message-div-container {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            width: 143px;
            height: 100%;

            &>.message-div-container-title {
                display: flex;
                margin-top: 10px;

                &>.title {
                    flex: 3;
                }

                &>.time {
                    flex: 1;
                    font-weight: lighter;
                    color: #c4c4c4;
                    font-size: 12px;
                }
            }

            &>.message-div-container-info {
                font-size: 15px;
                margin-top: 10px;
                color: #c4c4c4;
                width: 120px;
                /* 设置 p 标签的宽度 */
                white-space: nowrap;
                /* 强制文本在一行显示 */
                overflow: hidden;
                /* 隐藏超出部分 */
                text-overflow: ellipsis;
                /* 显示省略号 */
            }
        }
    }
}
</style>
